<template>
  <el-dialog title="新增/编辑" :visible="show" width="30%" :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="车牌号" prop="code">
        <el-input v-model="form.code" placeholder="请输入车牌号"></el-input>
      </el-form-item>
      <el-form-item label="驾驶员" prop="driverMemberId">
        <SelectByApi v-model="form.driverMemberId" :label.sync="form.driverMemberName" :api="memberList"></SelectByApi>
      </el-form-item>
      <el-form-item label="第三方编码" prop="thirdCode">
        <el-input v-model="form.thirdCode" placeholder="请输入三方编码"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" @change="onChangeType">
          <el-option v-for="(item,index) in carType" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { memberList } from "@/api/user";
import { add, update } from '@/api/car'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: ()=>{}
    },
    group: {
      type: Object,
    },
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
      },
      immediate: true,
    },
  },
  data() {
    return {
        form: {},
        rules: {
            type: [
                { required: true, message: '请输入车辆名称', trigger: 'blur' }
            ],
            code: [
                { required: true, message: '请输入车牌号', trigger: 'blur' }
            ],
            driverMemberId: [
                { required: true, message: '请选择驾驶员', trigger: 'change' }
            ]
        },
        carType: [
            // 保洁车、果壳箱清洗车、榕工、哈高、扫地车、洒水车、压缩车、养护车、冲水车、路面养护车、八桶车、护栏清洗车、雾炮车、洗桶车、电动扫地车
            {label: '保洁车', value: 'BJC'},
            {label: '果壳箱清洗车', value: 'GKXQXC'},
            {label: '榕工', value: 'RG'},
            {label: '哈高', value: 'HG'},
            {label: '扫地车', value: 'SDC'},
            {label: '洒水车', value: 'SSC'},
            {label: '压缩车', value: 'YSC'},
            {label: '养护车', value: 'YHC'},
            {label: '冲水车', value: 'CSC'},
            {label: '路面养护车', value: 'LMYHC'},
            {label: '八桶车', value: 'BTC'},
            {label: '护栏清洗车', value: 'HLQXC'},
            {label: '雾炮车', value: 'PWC'},
            {label: '洗桶车', value: 'XTC'},
            {label: '电动扫地车', value: 'DDSDC'},
        ]
    }
  },
  methods: {
    memberList,
    handleClose() {
        this.$refs['form'].resetFields();
        this.form = {};
        this.$emit("update:show", false);
    },
    submit() {
        this.$refs['form'].validate(async (valid) => {
            if(valid) {
                try {
                    if(!this.form.id) {
                        Object.assign(this.form, this.group)
                    }
                    const res = this.item.id ? await update(this.form) : await add(this.form);
                    if(res.code === 1) {
                        this.$emit('confirm');
                        this.handleClose()
                    }
                } catch (error) {
                    console.log("error--", error)
                }
            }
        })
    },
    onChangeType(e) {
        const item = this.carType.find(item => item.value == e);
        this.$set(this.form, 'typeName', item.label)
    }
  }
};
</script>
